<template>
    <div class="tabchange">
        <ul>
            <li @click="click(index)" v-for="(l,index) in list"  :class="{active:a==index?true:''}">
                {{l}}
            </li>
        </ul>
        <div v-if="a==0">
            <tab-list :m="tablist_3[0]"></tab-list>
        </div>
        <div v-if="a==1">
            <tab-list  :m="tablist_3[1]"></tab-list>
        </div>
        <div v-if="a==2">
            <tab-list  :m="tablist_3[2]"></tab-list>
        </div>
    </div>

</template>
<script>
    import TabList from '../components/tablist.vue'
    export default {
        props:['tablist_3'],
        components:{
            TabList
        },
        data() {
            return{
                a:0,
                isActive:'',
                list:['品质精选','吐血甩卖','限时特惠'],
                tablist:[]
            }
        },
        methods: {
            click(index){
                this.a=index
            }
        },
        created(){

        }
    }
</script>

<style>
    .tabchange ul{
        display: flex;
    }
    .tabchange ul li{
        flex-basis: 33.3%;
        text-align: center;
        height: 44px;
        font-size: 16px;
        color: #363636;
        font-weight: 400;
        line-height: 44px;
        margin: 0;
        padding: 0;
    }
    .tabchange .active{
        border-bottom:1px solid #0090f2;
        color: #0090f2;
        font-weight: 600;
    }
</style>